<style lang="less">
.index-mall-class {
	.with-bd td {
		border-bottom: 1px dashed #ddd;
	}
}
</style>


<template>
<div>
	<table class="index-mall-class" sz1 long mgt3 mgb4>
		<tr class="with-bd">
			<td gray3 pd1 w4>大类：</td>
			<td>
				<open-close :min-height=30>
					<span v-for="(item, index) in commodityClasses1" :key="index" pdx4 pdy1 linkable left
						@click="handleSelectCommodityClass1(item.value.name)" :selected="className1==item.value.name">{{item.value.displayName}}</span>
				</open-close>
			</td>
		</tr>
		<tr class="with-bd">
			<td gray3 pd1>子类：</td>
			<td>
				<open-close :min-height=30>
					<span v-for="(item, index) in commodityClasses2" :key="index" pdx4 pdy1 linkable  left
						@click="handleSelectCommodityClass2(item.value.name)" :selected="className2==item.value.name">{{item.value.displayName}}</span>
				</open-close>
			</td>
		</tr>
		<tr>
			<td gray3 pd1>小类：</td>
			<td>
				<open-close :min-height=30>
					<span v-for="(item, index) in commodityClasses3" :key="index" pdx4 pdy1 linkable  left
						@click="handleSelectCommodityClass3(item.value.name)" :selected="className3==item.value.name">{{item.value.displayName}}</span>
				</open-close>
			</td>
		</tr>
	</table>

	<table class="minitable" long sz1 mgt2>
		<tr>
			<td :bg-blue="model.order_by.name!=null" w6 text-center @click="handleOrderByCommodityName" style="cursor:pointer;">
				<span :white="model.order_by.name!=null">商品名称</span>
			</td>
			<td :bg-blue="model.order_by.price!=null" w6 text-center @click="handleOrderByCommodityPrice" style="cursor:pointer;">
				<span :white="model.order_by.price!=null">价格</span>
				<span v-if="model.order_by.price!=null" :white="model.order_by.price!=null">{{model.order_by.price == 'desc' ? '↓' : '↑'}}</span>
			</td>
			<td style="border-right:0;">
				<InputNumber v-model="model.minPrice" :min="0" :step="100" style="width:75px">
					<span slot="prefix">￥</span>
				</InputNumber>
				<span gray4> - </span>
				<InputNumber v-model="model.maxPrice" :min="0" :step="100" style="width:75px">
					<span slot="prefix">￥</span>
				</InputNumber>
				<Button @click="handlePriceOK" v-if="this.model.minPrice!=null||this.model.maxPrice!=null">确定</Button>
				<Button @click="handlePriceCancel" v-if="this.model.minPrice!=null||this.model.maxPrice!=null">取消</Button>
			</td>
			<td text-right>
				<Checkbox v-model="model.isInPromotion" @on-change="handleGetData">限时</Checkbox>
				<Checkbox v-model="model.isRecommended" @on-change="handleGetData">推荐</Checkbox>
			</td>
		</tr>
	</table>
	<Row :gutter="10">
		<custom-spin :status=page.loadingStatus style="height:30vh"></custom-spin>
		<Col v-for="(commodity, index) in commodities" :xs="{ span: 12, offset: 0 }" :sm="{ span: 12, offset: 0 }" :md="{ span: 6, offset: 0 }" :key="index" mgt2>
			<router-link :to="{name:'commodity-detail', params: {id:commodity.commodityId}}">
				<Card text-center style="height:290px;" pdy3 :padding=0 :bordered="false">
					<background-image long style="height:180px;max-width:200px;" :value=commodity.picture :title="commodity.commodityName">
						<p style="position:absolute;left:5px;bottom:5px" sz0>
							<span v-if="commodity.hasSalesPromotion" bg-red white pd1 mgr1>{{commodity.promotionName}}</span>
							<span v-if="commodity.isRecommended" bg-blue white pd1 mgr1>推荐</span>
						</p>
					</background-image>
					<p mgt2 sz1 ellipsis long pdx1 gray2 linkable :title="commodity.commodityName">{{commodity.commodityName}}</p>
					<p mgt2>
						<commodity-price :model=commodity></commodity-price>
					</p>
				</Card>
			</router-link>
		</Col>
	</Row>
	<AutoPage v-show="page.totalCount>page.page_size" :value="page" right mgt4></AutoPage>
</div>
</template>

<script lang="ts">
;import { Component, Vue, Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase';
import AutoPage from '@common/components/AutoPage';
import BackgroundImage from '@common/components/background-image';
import CustomSpin from '../../components/common/custom-spin.vue';
import OpenClose from '../../components/common/open-close.vue';
import CommodityPrice from '../../components/common/commodity-price.vue';

@Component({
	components: { AutoPage, BackgroundImage, CustomSpin, OpenClose, CommodityPrice }
})
export default class Mall extends AbpBase{
	status:String = 'success';
	model:any = {
		commodityClass: null,
		minPrice: null,
		maxPrice: null,
		isInPromotion: false,
		isRecommended: false,
		order_by: {
			name: null,
			price: null
		}
	}
	className1:string = null;
	className2:string = null;
	className3:string = null;
	get page() {
		return this.$store.state.mall.page;
	}
	get commodities(){
		return this.page.items;
	}
	get commodityClasses() {
		return this.$store.state.setting.settings.commodityClasses;
	}
	packingClasses(arr) {
		var temp = [{
			value: {
				name: null,
				displayName: '全部'
			},
			children: []
		}].concat(arr).concat([{
			value: {
				name: '',
				displayName: '未分类'
			},
			children: []
		}]);
		return temp;
	}
	get commodityClasses1() {
		return this.packingClasses(this.commodityClasses);
	}
	get commodityClasses2() {
		var temp = null;
		temp = this.commodityClasses1.find(elem => elem.value.name == this.className1);
		return this.packingClasses(temp != null ? temp.children : []);
	}
	get commodityClasses3() {
		var temp = null;
		temp = this.commodityClasses2.find(elem => elem.value.name == this.className2);
		return this.packingClasses(temp != null ? temp.children : []);
	}
	handleSelectCommodityClass1(value) {
		this.className1 = value;
		this.className2 = null;
		this.className3 = null;
		this.handleGetData();
	}
	handleSelectCommodityClass2(value) {
		this.className2 = value;
		this.className3 = null;
		this.handleGetData();
	}
	handleSelectCommodityClass3(value) {
		this.className3 = value;
		this.handleGetData();
	}
	handlePriceOK() {
		if(this.model.minPrice == null && this.model.maxPrice == null) return;
		if(this.model.minPrice == null) this.model.minPrice = 0;
		if(this.model.maxPrice != null && this.model.minPrice > this.model.maxPrice) {
			var temp = this.model.minPrice;
			this.model.minPrice = this.model.maxPrice;
			this.model.maxPrice = temp;
		}
		this.handleGetData();
	}
	handlePriceCancel() {
		this.model.minPrice = null;
		this.model.maxPrice = null;
		this.handleGetData();
	}
	handleGetData() {
		var action_data:any = {};
		var commodityClassTag = '';
		if(this.className1 != null) commodityClassTag += `[${this.className1}]`;
		if(this.className2 != null) commodityClassTag += `[${this.className2}]`;
		if(this.className3 != null) commodityClassTag += `[${this.className3}]`;
		action_data.classes = [commodityClassTag];
		action_data.minPrice = this.model.minPrice;
		action_data.maxPrice = this.model.maxPrice;
		action_data.isInPromotion = this.model.isInPromotion;
		action_data.isRecommended = this.model.isRecommended;

		this.page.action_data = action_data;
		this.page.order_by = this.model.order_by;

		this.page.getData();
	}
	handleOrderByCommodityName() {
		this.model.order_by.name = 'asc';
		this.model.order_by.price = null;
		this.handleGetData();
	}
	handleOrderByCommodityPrice() {
		this.model.order_by.name = null;
		this.page.order_by.price = this.page.order_by.price == 'asc' ? 'desc' : 'asc';
		this.handleGetData();
	}
}
</script>
